﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <title>签到</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1475051097_61334.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    
</head>
<body onload="showLeftTime()">
    <div class="contmobile">
        <div class="page page2">
            <!--<div class="qd-logo">欧洲美术史-环境艺术设计二班</div>-->
            <div class="buttons-row" style="margin:1rem 20%;">
                <a href="#1" class="tab-link button active">网页设计一班</a>
                <a href="#2" class="tab-link button">计算机网络设计与综合二班</a>
                <a href="#3" class="tab-link button">计算机技术一班三班</a>
            </div>
            <!--<div class="teacher-btn">
                <p class="teacher-time" id="show">14:00:00</p>
                <p class="teacher-qd">已签(18)/总数(30)</p>
                <div class="btn active">
                    <img src="images/ending.png" id="imgend" />
                </div>

            </div>-->
            <div class="studentbox">
                <p style="clear:both" class="theclass" id="1">网页设计22班</p>
                <ul style="padding:0 1rem;">
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                            <i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/bg-boys.png" />
                               
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                                
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/bg-boys.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/bg-girls.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                </ul>
                <p style="clear:both" class="theclass" id="2">网页设计二班</p>
                <ul style="padding:0 1rem;">
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/bg-boys.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/bg-girls.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                </ul>
                <p style="clear:both" class="theclass" id="3">网页设计3333班</p>
                <ul style="padding:0 1rem;">
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/girl.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/boy.png" />
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/bg-boys.png" />
                                <div class="statefive">
                                    <img src="images/state-bj.png" />

                                </div>
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="body-ren">
                                <img src="images/bg-girls.png" />
                                <div class="statefive">
                                    <img src="images/state-qt.png" />

                                </div>
                            </div>
                            <p>张理想</p><i class="iconfont icon-duihao click-on"></i>
                        </div>

                    </li>

                </ul>
            </div>
        </div>
    </div>
    <!--//弹出框-->
    <div class="pop-panel">
        <div class="pop-box">
            <div class="pop-cont">
                <div class="course-head">
                    <img src="images/kc.png" width="100%" />
                </div>
                <div class="course-list">
                    <span class="course-list-tit">姓名</span>
                    <span class="course-list-cont">马克思主义理论</span>
                </div>
                <div class="course-list">
                    <span class="course-list-tit">选课类别</span>
                    <span class="course-list-cont">1号教学楼503</span>
                </div>
                <div class="btn-pop">
                    <a>签到</a>
                    <a>签退</a>
                    <a>请假</a>
                    <a>迟到</a>
                    <a>迟到</a>
                </div>
            </div>
            <div class="close-btn">
                <img src="images/close.png" style="width:3rem;" />
            </div>
        </div>
    </div>
    <!-- 操作 -->
    <div class="operation-panle">
       
            <div class="row">
                <div class="col-50" style="line-height: 3rem; background: #fff;">                   
                        <i class="iconfont icon-yuan" style="margin-right:.5rem;color:#ccc"></i>全选                   
                </div>
                <div class="col-50" style="background: #5AD8F5; color: #fff; line-height: 3rem;">
                    批量操作
                </div>
            </div>
       
    </div>
    <script type="text/javascript" src="http://cdnjs.gtimg.com/cdnjs/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(".teacher-btn .btn").click(function () {
            document.getElementById("imgend").src = "images/ending-end.png";
        })
        //获得当前时间
        var initializationTime = (new Date()).getTime();
        function showLeftTime() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            document.all.show.innerHTML = hours + ":" + minutes + ":" + seconds + "";
            //一秒刷新一次显示时间
            var timeID = setTimeout(showLeftTime, 1000);
        }
        $(".studentbox li").click(function () {
            $(this).toggleClass("showli");
        })
        $(".row .col-50").click(function () {
            $(this).children().toggleClass("icon-yuan2")
        })
        //if ($(".studentbox li").hasClass("showli")) {
        //    $(".operation-panle").show();
        //} else {
        //    $(".operation-panle").hide();
        //}

        //查看课程动画效果
        //$(function () {
        //    $(".body-ren").click(function () {
        //        $(".pop-panel").addClass("show");
        //        $(".pop-box").addClass("animated bounceInDown").removeClass("bounceOutDown");
        //    })
        //    $(".close-btn img").click(function () {
        //        $(".pop-panel").addClass("animated bounceOutDown")
        //        $(".pop-panel").removeClass("show animated bounceOutDown")
        //    })
        //})

        //function setime() {
        //    $(function () {
        //        $(".pop-panel").removeClass("show animated bounceOutDown")
        //        $(".pop-box").removeClass(" animated bounceInDown");
        //    })
        //}
    </script>

</body>
</html>